<?php include_once('header.php'); ?>


<div id="slider" class="row full-width">
	<img src="images/slider.png" width="100%"/>
	<div id="alt-text" class="hide-for-small"><div id="content">Món ăn ngon, giá cũng ngon</div></div>
	<script>
		Cufon.replace('#alt-text', {fontSize: '30px', color: 'white'});
	</script>
</div>

<div id="content" class="row">

	<div class="large-8 small-12 columns">
		<div class="row" id="search_wrapper">
			<div id="label_wrapper" class="large-2 hide-for-small columns">
				<label id="lbl_search_box" for="search_box">Tìm kiếm:</label>
			</div>
			<script>
				Cufon.replace('#lbl_search_box', {fontSize: '15px', color: 'white'});
			</script>
			<div class="large-10 small-12 columns nopadding">
				<input id="search_box" type="search" placeholder="Tìm kiếm địa điểm ăn uống. vd: cafe Roxa, sushi bar....."/>
				<img class="hide" id="cancel_icon" src="images/cancel-icon.png"/>
			</div>
		</div>
		<div id="mobile_autocomplete_box">
			<!-- <img id="arrow" src="images/arrow-up-small.png"/> -->
			<div class="result_category">
				<div id="results">
					<div id="category_name">NHÀ HÀNG</div>
					<ul>
						<li>
							<img src="images/result-1.png"/> Sarpinoss' Pizza
						</li>
						<li>
							<img src="images/result-2.png"/> Sarphia Restaurant
						</li>
					</ul>
				</div>
			</div> <!-- #category_name -->
			<div class="delimiter"></div>
			<div class="result_category">
				<div id="results">
					<div id="category_name">QUÁN CAFE</div>
					<ul>
						<li>
							<img src="images/result-3.png"/> Samdoria Cafe & Bar
						</li>
					</ul>
				</div>
			</div> <!-- #category_name -->
			<div id="mobile_autocomplete_close_box">ĐÓNG TÌM KIẾM</div>
		</div>
		<div id="autocomplete_box">
			<img id="arrow" src="images/arrow-up-small.png"/>
			<div class="result_category">
				<div id="results">
					<div id="category_name">NHÀ HÀNG</div>
					<ul>
						<li>
							<img src="images/result-1.png"/> Sarpinoss' Pizza
						</li>
						<li>
							<img src="images/result-2.png"/> Sarphia Restaurant
						</li>
					</ul>
				</div>
			</div> <!-- #category_name -->
			<div class="delimiter"></div>
			<div class="result_category">
				<div id="results">
					<div id="category_name">QUÁN CAFE</div>
					<ul>
						<li>
							<img src="images/result-3.png"/> Samdoria Cafe & Bar
						</li>
					</ul>
				</div>
			</div> <!-- #category_name -->
		</div>
		<div id="infomations">
			<div class="large-6 columns">
				<img src="images/credit-card.png"/><span>Hãy khám phá những ưu đãi từ thẻ 2F</span>
			</div>
			<div class="large-6 columns">
				<img src="images/users.png"/><span>Tham gia vào cộng đồng ẩm thực của 2F</span>
			</div>
			<script>
				$(document).ready(function() {
					Cufon.replace('#infomations span', {color: '#f283ae', cursor: 'pointer', hover: '#0ab0f0'});
				});
			</script>
		</div>
		<div class="row" id="register">
			<div class="large-6 columns">
				<img src="images/2f-card.png"/>
			</div>
			<div id="register_button_wrapper" class="large-6 columns">
				<div id="space_" class="hide-for-small"></div>
				<img class="my_button" src="images/register-button.png"/>
				<div id="register_button"></div>
			</div>
		</div>

		
	</div>
	
	<div class="large-4 columns hide-for-small">

		<div style="max-width: 280px; width: 100%" class="fb-like-box" data-href="http://www.facebook.com/platform" data-height="377" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>

	</div>
</div>
		
<div id="related_place" class="row">
	<p id="header_where_to_play" class="nice_header">ĐI ĐÂU TUẦN NÀY</p>
	<script>
		$(document).ready(function() {
			Cufon.replace('#header_where_to_play', {color: '#0ab0f0'});
		});
	</script>
		<ul id="place_wrapper" class="small-block-grid-2 large-block-grid-4">
			<li>
				<img src="images/place-1.png"/>
				<div class="discourt_tags"><div id="content">30%</div></div>
				<h2>NHÀ HÀNG AU THE MAIOR</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
				<p><a href="#">Xem chi tiết >></a></p>
			</li>
			<li>
				<img src="images/place-2.png"/>
				<div class="discourt_tags"><div id="content">10%</div></div>
				<h2>CAFE CHUÔNG GIÓ</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
				<p><a href="#">Xem chi tiết >></a></p>
			</li>
			<li>
				<img src="images/place-3.png"/>
				<div class="discourt_tags"><div id="content">20%</div></div>
				<h2>TRÀ SỮA TIÊN HƯỞNG</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
				<p><a href="#">Xem chi tiết >></a></p>
			</li>
			<li>
				<img src="images/place-4.png"/>
				<div class="discourt_tags"><div id="content">20%</div></div>
				<h2>NHÀ HÀNG PIZZA 4P</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
				<p><a href="#">Xem chi tiết >></a></p>
			</li>
		</ul>
		<script>
			$(document).ready(function() {
				Cufon.replace('.discourt_tags', {color: 'white'});
			});
		</script>
</div>

<div id="imonials">
	<div class="row">
		<ul class="small-block-grid-5 large-block-grid-10">
			<li><img src="images/p1.png"/></li>
			<li><img src="images/p2.png"/></li>
			<li><img src="images/p3.png"/></li>
			<li><img src="images/p4.png"/></li>
			<li><img src="images/p5.png"/></li>
			<li><img src="images/p6.png"/></li>
			<li><img src="images/p7.png"/></li>
			<li><img src="images/p8.png"/></li>
			<li><img src="images/p9.png"/></li>
			<li><img src="images/p10.png"/></li>
		</ul>
	</div>
</div>

<?php include_once('footer.php'); ?>
